<template>
    <div id="userLayout" class="user-layout-wrapper">
        <div class="user-layout-wrapper-left">
            <!--图片-->
            <div class="user-layout-wrapper-left-top">
                <div class="user-layout-wrapper-left-logo">
                    <img style="width: 0.76rem;height: 0.8rem;" src="~@/assets/index_pic1.png" alt="" />
                </div>
                <div class="user-layout-wrapper-left-title">
                    <img style="width: 2.33rem;height: 0.57rem;" src="~@/assets/index_pic2.png" alt="" />
                </div>
            </div>
            <!--欢迎登录爱学坊！-->
            <div class="welcome">欢迎登录爱学坊！</div>
            <!--账号登录-->
            <el-form :model="loginForm" :rules="rules" ref="loginForm" @keyup.enter.native="submitForm">

                <!--账号登录-->
                <div class="form_title">账号登录</div>
                <el-form-item prop="username" class="form_item_content">
                    <el-input placeholder="请输入手机号码" v-model="loginForm.mobile">
                        <i class="el-input__icon el-icon-user" slot="prefix"></i></el-input>
                </el-form-item>

                <!--密码-->
                <div class="form_title">密码</div>
                <el-form-item prop="password" class="form_item_content">
                    <el-input :type="lock === 'lock' ? 'password' : 'text'" placeholder="请输入密码" v-model="loginForm.password">
                        <i :class="'el-input__icon el-icon-' + lock" @click="changeLock" slot="prefix"></i>
                    </el-input>
                </el-form-item>

                <!--验证码-->
                <div class="form_title">验证码</div>
                <el-form-item class="form_item_content">
                    <div style="display: flex;">
                        <el-input v-model="loginForm.captcha" name="logVerify" placeholder="请输入验证码" style="flex:1;">
                            <i class="el-input__icon el-icon-set-up" slot="prefix"></i>
                        </el-input>
                        <div class="vPic"><img :src="picPath" @click="getCaptcha"/></div>
                    </div>
                </el-form-item>

                <!--记住我，7天免登录-->
                <div class="remember-me">
                    <el-checkbox v-model="checked">记住我，7天免登录</el-checkbox>
                </div>

                <!--登录-->
                <el-form-item style="display: flex;flex-direction: row-reverse;">
                    <div @click="submitForm" class="submit-button">登录</div>
                </el-form-item>
            </el-form>

            <!--copyright-->
            <div class="copyright">
                <div class="txt">Copyright © 2020-2021 江西爱学坊教育科技有限公司</div>
                <div class="txt">All Rights Reserved. 赣ICP备2020011979号-1</div>
            </div>
        </div>
        <!--右侧封面图-->
        <div class="user-layout-wrapper-right">
            <div class="user-layout-wrapper-right-content">
                <div class="good-afternoon">{{sayHello}} ：）</div>
                <div class="tips">帮助家长解决课后学生看护及素质教育难题——爱学坊</div>
            </div>
        </div>
    </div>
</template>

<script>
    import {mapActions} from "vuex";
    import {captcha} from "@/api/user";

    let designWidth = 1920; // 设计图宽度尺寸
    let designHeight = 1080; // 设计图高度尺寸
    let html = document.documentElement;
    let wW = html.clientWidth;// 窗口宽度
    let wH = html.clientHeight;// 窗口高度
    let rem
    if(wH/wW < designHeight/designWidth) {
        rem = wH * 100 / designHeight
    } else {
        rem = wW * 100 / designWidth;
    }
    document.documentElement.style.fontSize = rem + 'px';

    export default {
        name: "Login",
        data() {
            const checkUsername = (rule, value, callback) => {
                if (value.length < 5 || value.length > 12) {
                    return callback(new Error("请输入正确的手机号码"));
                } else {
                    callback();
                }
            };
            const checkPassword = (rule, value, callback) => {
                if (value.length < 6 || value.length > 12) {
                    return callback(new Error("请输入正确的密码"));
                } else {
                    callback();
                }
            };
            return {
                checked: false,
                curYear: 0,
                lock: "lock",
                verShow: true,
                timer: 60,
                loginForm: {
                    mobile: "",
                    password: "",
                },
                rules: {
                    mobile: [{validator: checkUsername, trigger: "blur"}],
                    password: [{validator: checkPassword, trigger: "blur"}],
                },
                logVerify: "",
                picPath: "",
            };
        },
        computed:{
            sayHello(){
                let date=new Date();
                if(date.getHours()>=0&&date.getHours()<12){
                    return "上午好"
                }else if(date.getHours()>=12&&date.getHours()<18){
                    return"下午好"
                }else{
                    return"晚上好"
                }
            },
        },
        created() {
            this.getCaptcha();

        },
        methods: {
            ...mapActions("user", ["LoginIn"]),
            async login() {
                await this.LoginIn(this.loginForm);
            },
            async submitForm() {
                this.$refs.loginForm.validate(async (v) => {
                    if (v) {
                        this.login().catch(e => {
                            this.getCaptcha();
                        });
                    } else {
                        this.$message({
                            type: "error",
                            message: "请正确填写登录信息",
                            showClose: true,
                        });
                        this.getCaptcha();
                        return false;
                    }
                });
            },
            changeLock() {
                this.lock === "lock" ? (this.lock = "unlock") : (this.lock = "lock");
            },
            async getCaptcha() {
                const data = await captcha();
                this.picPath = window.URL.createObjectURL(data)
            },
        },
    };
</script>

<style scoped lang="scss">
    .user-layout-wrapper {
        height: 100%;
        position: relative;
        display: flex;
        .user-layout-wrapper-left {
            width: 6.76rem;
            background: white;
            height: 100%;
            overflow: hidden;
            box-sizing: border-box;
            padding-left: 1.02rem;
            padding-right: 1.02rem;
            .user-layout-wrapper-left-top{
                display: flex;
                margin-top: 1.4rem;
                align-items: center;
                .user-layout-wrapper-left-logo {
                }
                .user-layout-wrapper-left-title {
                    margin-left: 0.12rem;
                }
            }
            .welcome {
                margin-top: 0.45rem;
                margin-bottom: 0.59rem;
                font-size: 24px;
                font-family: PingFang SC;
                color: #000000;
            }
            .form_title {
                font-size: 12px;
                font-family: PingFang SC;
                color: #000000;
                margin-bottom: 0.12rem;
            }
            .form_item_content {
                margin-bottom: 0.3rem;
            }
            .vPic {
                width: 1.04rem;
                height: 38px;
                border: 1px solid #E3E3E3;
                border-radius: 4px;
                line-height: 0;
                margin-left: 0.12rem;
                img {
                    width: 1rem;
                    height: 0.36rem;
                    cursor: pointer;
                    vertical-align: middle;
                }
            }
            .remember-me{
                display: flex;
                font-size: 14px;
                font-family: PingFang SC;
                /*::v-deep .el-checkbox__inner {*/
                /*    background: #E3E3E3;*/
                /*    border: none;*/
                /*}*/
            }
            .submit-button {
                margin-top: 0.56rem;
                width: 0.76rem;
                height: 0.44rem;
                background: #0084FF;
                border-radius: 4px;
                display: flex;
                justify-content: center;
                align-items: center;
                color: white;
                cursor: pointer;
            }
            .copyright {
                margin-top: 0.78rem;
                text-align: center;
                .txt {
                    font-size: 12px;
                    font-family: PingFang SC;
                    color: #999999;
                    line-height: 24px;
                }
            }
        }
        .user-layout-wrapper-right {
            flex: 1;
            position: relative;
            height: 100%;
            background-color: #00aeff;
            background-image: url(~@/assets/login_bg.png);
            background-size: 100% 100%;
            background-repeat: no-repeat;
            .user-layout-wrapper-right-content {
                position: absolute;
                bottom: 11.2%;
                left: 10.9%;
                .good-afternoon {
                    font-size: 0.56rem;
                    font-family: PingFang SC;
                    color: #FFFFFF;
                    margin-bottom: 0.22rem;
                }
                .tips {
                    font-size: 20px;
                    font-family: PingFang SC;
                    color: #FFFFFF;
                }
            }
        }
    }
</style>
